<template>
  <div>
    <div class="timepick-width-prepend">
      <el-button type="default" class="prepend-text">{{ labeltext }}</el-button>
      <el-select
          style="width: 400px"
          v-model="internalValue"
          filterable
          placeholder="请选择"
          @change="changeselect"
          >
        <el-option
            v-for="(item, index) in selectList"
            :key="index"
            :label="item.deptName"
            :value="item.id">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DateSelector',
  props: {
    labeltext: {
      type: String,
      default: ""
    },
    selectList: {
      type: Array,
      default: () => []
    },
    value: { type: [String, Number], default: '' }
  },
  data() {
    return {
      selectContent: {
        content: ''
      }
    };
  },

  computed: {
    // 使用计算属性实现双向绑定
    internalValue: {
      get() {
        return this.value;  // 从父组件接收值
      },
      set(val) {
        this.$emit('input', val);  // 向父组件更新值
      }
    }
  },
  // watch: {
  //   selectList: {
  //     immediate: true,
  //     handler(newVal) {
  //       if (newVal.length === 0) {
  //         this.selectContent.content = '';
  //       }
  //     }
  //   }
  // },
  methods: {
    changeselect(val) {
      this.$emit('changeselect', val);
    }
  }
};
</script>

<style lang="scss" scoped>
.timepick-width-prepend {
  display: flex;
  align-items: center;

  .prepend-text {
    background: #fff;
    color: #909399;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    cursor: default;

    :focus, :hover {
      border-color: #DCDFE6!important;
    }
  }

  .prepend-text:focus, .prepend-text:hover {
    border-color: #DCDFE6!important;
  }

  .el-input__inner {
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
  }

  ::v-deep .el-input__wrapper {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}
</style>